<template>
  <div class="part-structure">
    <div class="left">
      <PiTable
        border
        size="small"
        isSearch
        default-expand-all
        rowKey="oid"
        :tableData
        :tableColumns
        :pagination="page"
        highlight-current-row
        @searchTable="getData"
        @row-click="clickRow"
      >
        <template #displayIdentifier="{ row }">
          <el-icon color="#409efc" title="部件"><Setting /></el-icon>
          <span style="padding-left: 8px">{{ row.displayIdentifier }}</span>
        </template>
      </PiTable>
    </div>
    <MoveLine left="410px" height="calc(100% - 10px)"></MoveLine>
    <PiTabs class="right-tb" v-model:tabList="tabList" type="card" activeTabKey="subTab"></PiTabs>
  </div>
</template>

<script setup name="partDetailStructure">
import attr from './attr.vue';
import classify from './classify.vue';
import visual from './visual.vue';
import use from './use.vue';
import specificValue from './specificValue.vue';
import effectiveness from './effectiveness.vue';
import replace from './replace.vue';
import document from './document.vue';
import { usePartStructureStore } from '@/store';

const { setOid } = usePartStructureStore();
const route = useRoute();
const tabList = shallowRef([
  {
    label: '属性',
    name: 'attr',
    component: attr,
  },
  {
    label: '分类',
    name: 'classify',
    component: classify,
  },
  {
    label: '可视化',
    name: 'visual',
    component: visual,
  },
  {
    label: '使用',
    name: 'use',
    component: use,
  },
  {
    label: '具体值',
    name: 'specificValue',
    component: specificValue,
  },
  {
    label: '有效性',
    name: 'effectiveness',
    component: effectiveness,
  },
  {
    label: '取代',
    name: 'replace',
    component: replace,
  },
  {
    label: '文档',
    name: 'document',
    component: document,
  },
]);
const page = reactive({
  pageSize: 10,
  pageNum: 1,
  total: 0,
  fullData: true,
});
const { partApi } = window.$api;
const tableColumns = ref([]);
const tableData = ref([]);
onBeforeMount(() => {
  getData();
  setOid(route.query.oid);
});
const getData = () => {
  const params = {
    tableID: 'PartStructureTable',
    oid: route.query.oid,
  };
  partApi.getWTPartBOMTree(params).then((res) => {
    tableColumns.value = res.data.columns.map((item) => ({
      ...item,
      sortable: true,
      search: true,
    }));
    tableData.value = res.data.rows;
  });
};
const clickRow = (row) => {
  setOid(row.oid);
};
</script>

<style scoped lang="less">
.part-structure {
  position: relative;
  display: flex;
  padding-top: 10px;
  height: calc(100% - 10px);
  background-color: var(--el-fill-color-blank);
  overflow: hidden;
  .left {
    display: flex;
    flex-shrink: 0;
    width: 400px;
    margin-right: 20px;
    height: 100%;
    :deep(.el-input) {
      width: 100%;
    }
    :deep(.el-table__row) {
      &:hover {
        cursor: pointer;
      }
    }
  }
  .right-tab {
    flex: auto;
  }
}
</style>
